import React, {Component} from 'react';
import {Form, Input, Button, message, Icon, Select} from "antd";

class ScoreInquiry extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // message.success('Received values of form: ', values.DISCIPLINE);
                message.info(`Click on item ${values.DISCIPLINE}`);
                console.log(values);
            }
        });
    };

    render() {
        const Option = Select.Option;
        const {getFieldDecorator} = this.props.form;

        return (
            <div className="education-set-score">
                <div className="education-set row">
                    <div className="text-center">
                        <h2>教育培训</h2>
                        <div className="welding-set-gutter-line">
                            <hr/>
                            <span/>
                            <hr/>
                        </div>
                        <h3>EDUCATION AND TRAINING</h3></div>
                </div>
                <div className="clearfix association-education row">
                    <div className="col-lg-4 col-md-3 col-sm-2"/>
                    <div className="col-lg-4 col-md-6 col-sm-8">
                        <h2 className="text-center color1 mrt30">成绩查询</h2>
                        <Form onSubmit={this.handleSubmit} className="mrt30">
                            <Form.Item>
                                {
                                    getFieldDecorator('DISCIPLINE')(<Select size="large" placeholder="--请选择查询科目--">
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="disabled" disabled>Disabled</Option>
                                        <Option value="Yiminghe">yiminghe</Option>
                                    </Select>)
                                }
                            </Form.Item><Form.Item>
                            {
                                getFieldDecorator('IDCARD', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '身份证号不能为空'
                                        },
                                        // {
                                        //     min: 5, max: 10,
                                        //     message: '长度不在范围内'
                                        // },
                                        // {
                                        //     pattern: new RegExp('^\\w+$', 'g'),
                                        //     message: '用户名必须为字母或者数字'
                                        // }
                                    ]
                                })(<Input size="large" prefix={<Icon type="idcard" style={{fontSize:"16px"}}/>} placeholder="请输入您的身份证号码"/>)
                            }
                        </Form.Item>
                            <Form.Item>
                                {
                                    getFieldDecorator('PHONE', {
                                        initialValue: '',
                                        rules: [{
                                            required: true,
                                            message: '手机号码不能为空'
                                        },]
                                    })(<Input size="large" prefix={<Icon type="phone" style={{fontSize:"16px"}}/>} placeholder="请输入考试报名手机号码"/>)
                                }
                            </Form.Item>
                            <Form.Item>
                                <Button size="large" style={{width: "100%"}} type="primary" htmlType="submit"
                                        className="login-form-button">
                                    确认查询
                                </Button>
                            </Form.Item>

                            <div className="text-danger">
                                <small>注意：请认真填写。
                                </small>
                            </div>
                        </Form>
                    </div>
                </div>
                <div className="association-news">
                    <h4 className="after-line"><span><b>成绩查询结果</b></span></h4>
                    <div className="well table-responsive">
                        <table className="table table-bordered table-condensed text-center">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>身份证号</th>
                                <th>手机号</th>
                                <th>数学成绩</th>
                                <th>语文成绩</th>
                                <th>体育成绩</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>张三</td>
                                <td>411111111111111111</td>
                                <td>11111111111</td>
                                <td>90</td>
                                <td>90</td>
                                <td>90</td>
                            </tr>
                            </tbody>
                        </table>
                        <small className="text-danger">注：有疑问请找客服。</small>
                    </div>
                </div>
            </div>
        );
    }
}

export default Form.create()(ScoreInquiry);